﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>消防项目</title>

    <!--360浏览器默认使用极速内核-->
    <meta name=”renderer” content=”webkit” />

    <!-- IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>


    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <!--<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>-->

    <!--<link href="../src/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


    <!--[if lt IE 9]>
    <script type="text/javascript">
        String.prototype.trim=function(){
            return this.replace(/(^\s*)|(\s*$)/g, "");
　　     }
    </script>
    <![endif]-->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">

    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css">-->

    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.zh-CN.min.js"></script>-->

    <style>

        html,body{
            height: 100%;
            width: 100%;
            color: #848484;
        }

        li{
            color: #848484;
        }

        #wrapper{
            height: 100%;
            position: relative;
        }


        .content{
            /*height: 100%;*/
            width: auto;
            /*float: right;*/
            padding-bottom: 70px;
        }

        .footer{
            position: absolute;
            width: 100%;
            bottom: 0;
            margin: 0;
        }

        .login{
            height: 100%;
        }

        .login .ms-view{
            min-height: 100%;
            height: 100%
        }

        .handler{
            height: auto;
            width: auto;
            margin: 0 30px
            /*background-color: blue;*/
        }

        #changePwdModal .warn{
            color: red;
        }

        .navbar{
            /*padding: 5px;*/
            background: #057baf;
            height: 85px;
            padding: 0 15px;
        }

        .navbar-center{
            margin-left: 10%;
        }

        .navbar-default .navbar-nav>li>a {
            color: #fff;
            font-size: 14px;
            font-family: "Microsoft YaHei";
        }

        .navbar a p {
            text-align: center;
            color: #fff;
            /*padding: 5px 0;*/
            padding-top: 5px;
        }

        .navbar-brand{
            height: 85px;
            line-height: 85px;
            padding: 0;
        }

        .navbar-header{
            /*padding: 5px 0;*/
        }

        .navbar-header a {
            color: #fff !important;
            margin-right: 50px;
        }

        .navbar-right{
            padding-top: 32px;
            font-size: 12px;
        }


        .navbar-brand>img {
            display: inline-block;
        }

        .dropdown-menu{
            width: auto !important;
        }


        @font-face {
            font-family: 'iconfont';
            src: url('/font/iconfont.eot');
            src: url('/font/iconfont.eot?#iefix') format('embedded-opentype'),
            url('/font/iconfont.woff') format('woff'),
            url('/font/iconfont.ttf') format('truetype'),
            url('/font/iconfont.svg#iconfont') format('svg');
        }

        /*@font-face {*/
            /*font-family: 'iconfont2';  !* project id 197317 *!*/
            /*src: url('/font/font2.eot');*/
            /*src: url('/font/font2.eot?#iefix') format('embedded-opentype'),*/
            /*url('/font/font2.woff') format('woff'),*/
            /*url('/font/font2.ttf') format('truetype'),*/
            /*url('/font/font2.svg#iconfont') format('svg');*/
        /*}*/

        .iconfont{
            font-family:"iconfont" !important;
            font-size: 30px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.1px;
            -moz-osx-font-smoothing: grayscale;
        }

        .iconfont2{
            font-family:"iconfont2" !important;
            font-size: 30px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.1px;
            -moz-osx-font-smoothing: grayscale;
        }

        .menu-item{
            display: inline-block;
            text-align: center;
            height: 50px;
            font-size: 15px;
        }

        .menu-item a{
            text-decoration: none;
            color: #fff;
        }


        /* handle area css */

        .btnBlock{
            color: #fff;
            display: inline-block;
            height: 65px;
            width: 150px;
            line-height: 65px;
            font-size: small;
            text-align: center;
            border-radius: 5%;
            position: relative;
            margin: 5px 50px;
        }

        .btnBlock[type=f]{
            background: #F7C709;
            cursor: pointer;
        }

        .btnBlock[type=s]{
            background: #2196F3;
            cursor: pointer;
        }

        .btnBlock[type=t]{
            background: #ba52cc;
            cursor: pointer;
        }

        .btnBlock[type=l]{
            background: lightgreen;
            cursor: pointer;
        }

        .triangle[type=display]{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 10px 17.3px 10px;
            border-color: transparent transparent #efefef transparent;
            position: absolute;
            left: 55px;
            top: 65px;
        }

        .btnarea{
            border: 1px solid #ccc;
            border-radius: 10px;
            margin: 10px 0;
            padding: 30px;
            /*margin-right: 60px;*/
        }

        table{
            border-radius: 10px;
        }

        table thead{
            background: #ccc;
            color: #000;
        }

        .btn-right{
            float: right;
        }

        .modal-header{
            background: #067bb0 !important;
            color: #DEDEDE !important;
        }
        .navbar-default .navbar-nav>li>a:focus{
            color: #5fabcc;
        }

        /*.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {*/
            /*color: #5fabcc;*/
            /*background-color: #5fabcc;*/
        /*}*/

        .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
            background-color: #5fabcc;
            color: #fff;
        }
        .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
            background-color: #5fabcc;
            color: #fff;
        }

        .dropdown-menu>li>a:hover{
            color: #5fabcc !important;
        }

        .handler > span >i{
            color: #5fabcc;
            font-size: 14px;
        }

        .btnarea button{
            /*background: #EAC85D;*/
            width: 65px;
            height: 30px;
        }

        footer{
            line-height: 30px;
            height: 30px;
            background: #057baf;
            text-align: center;
            color: #fff;
        }

        .data{
            margin: 0 30px;
        }

        /*.handler{*/
            /*margin: 0 30px;*/
        /*}*/

        .btnBlock i{
            position: absolute;
            left: 20px;
        }

        .btnBlock span{
            padding-left: 30px;
        }

        .handler > span > i {
            padding-right : 10px;
        }

        hr{
            margin: 10px 0;
        }

        button.close{
            color: #fff !important;
            opacity: 1 !important;
        }

        .modal-body span{
            color: red;
        }

    </style>
    <script>
        /*IE8兼容start*/
        if (!Array.prototype.indexOf) {
            Array.prototype.indexOf = function (item, i) {
                //alert("prototyping...");
                i || (i = 0);
                var length = this.length;
                if (i < 0) i = length + i;
                for (; i < length; i++)
                    if (this[i] === item) return i;
                return -1;
            };
        }
        if (!window.WebSocket) {
            window.WebSocket = function () { };
            window.WebSocket.prototype = {
                onmessage: function () { },
                onclose: function () { },
                onopen: function () { },
                close: function(){}
            }
        }
        /*IE8兼容end*/
    </script>
</head>

<body ms-important="root">


    <div id="wrapper">

    <!-- login -->
    <div :if="@needLogin" ms-html="@loginPage" class="login"></div>

    <!-- navi area -->
    <div :if="!@needLogin" class="naviBar">
        <div>
            <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#!/landing/landing"><img :attr="{src : @logoImg}" alt="消防考核系统">陕西消防考核管理系统</a>
                    </div>

                        <ul class="nav navbar-nav navbar-center">

                            <li :hover="[@active && 'active']" :if="@isShow('用户管理')">
                                    <a href="#!/userTable/userTable">
                                        <p class="iconfont">&#xe60a;</p>
                                        用户管理
                                    </a>
                            </li>

                            <li :hover="[@active && 'active']" :if="@isShow('科室类型管理')">
                                    <a href="#!/office/office">
                                        <p class="iconfont">&#xe678;</p>
                                        科室类型
                                    </a>

                            </li>

                            <li :hover="[@active && 'active']" :if="@isShow('组织机构管理')">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                        <p class="iconfont">&#xe648;</p>
                                        组织机构
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu" >
                                        <li ms-visible="@isShow('队伍操作')"><a href="#!/organization/organization"><img :attr="{ src : @org }">队伍操作</a></li>
                                        <li ms-visible="@isShow('科室操作')"><a href="#!/orgOffice/orgOffice"><img :attr="{ src : @team }">科室操作</a></li>
                                    </ul>
                            </li>

                            <li :hover="[@active && 'active']" :if="@isShow('任务类型管理')">
                                <a href="#!/taskType/taskType"><p class="iconfont">&#xe678;</p>任务类型管理</a>
                            </li>

                            <li :hover="[@active && 'active']" :if="@isShow('任务管理')">

                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                    <p class="iconfont">&#xe665;</p>
                                    任务管理
                                    <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" >
                                    <li ms-visible="@isShow('任务操作')"><a href="#!/task/task"><img :attr="{ src : @op }">任务操作</a></li>
                                    <li ms-visible="@isShow('任务下发')"><a href="#!/sendTask/sendTask"><img :attr="{ src : @send }">任务下发</a></li>
                                    <li ms-visible="@isShow('任务上报')"><a href="#!/uploadTask/uploadTask"><img :attr="{ src : @up }">任务上报</a></li>
                                </ul>
                            </li>

                            <!--<li class="nav-divider" :if="@isShow('任务管理')"></li>-->
                            <li :hover="[@active && 'active']" :if="@isShow('绩效管理')"><a href="#!/exam/exam"><p class="iconfont">&#xe624;</p>绩效管理</a></li>
                            <!--<li class="nav-divider" :if="@isShow('绩效管理')"></li>-->
                            <li :hover="[@active && 'active']" :if="@isShow('综合查询')"><a href="#!/query/query"><p class="iconfont">&#xe606;</p>综合查询</a></li>
                        </ul>


                    <ul class="nav navbar-nav navbar-right" :if="!@needLogin">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">当前用户：{{user.userName}}<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a data-toggle="modal" data-target="#changePwdModal"><i style="font-size: 15px;" class="iconfont">&#xe502;</i>修改密码</a></li>
                                <li><a href="#" :click="@logout"><i style="font-size: 15px" class="iconfont">&#xe600;</i>退出</a></li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </nav>
        </div>
    </div>

    <!-- conrent area -->
    <div :if="!@needLogin" class="content">
        <div>
            <div ms-html="@currPage"></div>
        </div>
    </div>

    <!-- 修改密码modal开始 -->
    <div class="modal fade" id="changePwdModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title">修改密码</h5>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group" id="oldPwd" :class="[@pwd.old && 'has-error']">
                            <label class="control-label">旧密码:</label>
                            <input type="password" class="form-control" :duplex="@user.oldPwd" required placeholder="请输入旧密码" :change="@validate1">
                            <small class="warn" :if="@pwd.old">验证不通过，请重新输入</small>
                        </div>
                        <div class="form-group" id="newPwd">
                            <label class="control-label">新密码:</label>
                            <input type="password" class="form-control" :duplex="@user.newPwd" required placeholder="密码必须大于6位，小于12位。" minlength="6" maxlength="12" :change="@validate2">
                            <small class="warn" :if="@pwd.new">验证不通过，请重新输入</small>
                        </div>
                        <div class="form-group" id="repeatPwd">
                            <label class="control-label">重复密码:</label>
                            <input type="password" class="form-control" :duplex="@user.repeatPwd" required placeholder="请和新密码输入一致" :change="@validate3">
                            <small class="warn" :if="@pwd.re">验证不通过，请重新输入</small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" :click="@changePwd">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改密码modal结束 -->

        <!--footer 开始-->
    <div :if="!@needLogin" class="navbar-fixed-bottom">
        <footer>
            <div class="container">
                <div class="row">
                    <p>Copyright © 2017 陕西消防总队版权所有 </p>
                </div>
            </div>
        </footer>
    </div>
        <!--footer 结束-->
    </div>



    <!-- custom alert style -->
    <div id="_alert" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background: rgba(255, 0, 0, 0.6) !important;color: #fff !important;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    <p style="text-align: center;color: #848484;" id="content"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


</body>
</html>